<template>
  <div class="userAmount">
    <div class="title">
      <img src="../assets/img/会员下单金额排名title.png" alt="" />
    </div>
    <div :class="{ scrollBox: line10 == 0, scrollBoxDouble: line10 == 1 }">
      <vue-seamless-scroll
        :data="userList"
        :class="{
          'seamless-warp': line10 == 0,
          'seamless-warpDouble': line10 == 1,
        }"
        :class-option="classOption"
        v-show=" line10 == 0"
      >
        <ul>
          <li v-for="(item, index) in userList" :key="index" class="font12">
            <div class="order">TOP{{ item.rank }}</div>
            <p class="userName">{{ item.name }}</p>
            <div class="progress">
              <div
                :style="{
                  width: (item.longGmv / userList[0].longGmv) * 100 + 'px',
                  height: '8px',
                }"
              ></div>
            </div>
            <p class="price">￥{{ item.toThousands }}</p>
          </li>
        </ul>
      </vue-seamless-scroll>
      <ul v-show=" line10 == 1">
        <li v-for="(item, index) in userList" :key="index" class="font12">
          <div class="order">TOP{{ item.rank }}</div>
          <p class="userName">{{ item.name }}</p>
          <div class="progress">
            <div
              :style="{
                width: (item.longGmv / userList[0].longGmv) * 100 + 'px',
                height: '8px',
              }"
            ></div>
          </div>
          <p class="price">￥{{ item.toThousands }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import url from "../api/apiUrl";
import { getRequest } from "../api/indexGet";
export default {
  props: {
    line10: {
      default: 0,
    }, //1代表显示10个，0代表显示5个
  },
  data() {
    return {
      userList: [],
      totalAxios: null,
    };
  },
  created() {
    this.getUserGmv();
    this.intervalAxios();
  },
  methods: {
    async getUserGmv() {
      let res = await getRequest(url.userGmv);
      if (res.data.code == "000000") {
        this.userList = res.data.content;
        this.userList.map((obj) => {
          this.$set(obj, "toThousands", this.$parent.toThousands(obj.longGmv));
        });
      }
    },
    // 2s请求一次
    intervalAxios() {
      this.totalAxios = setInterval(() => {
        this.getUserGmv();
      }, 4000);
    },
  },
  computed: {
    // 滚动的部分参数
    classOption() {
      return {
        step: 0.5,
        limitMoveNum: 1, //这个是修改moveSwitch()之前的使用方法，这里的数值指的是数据条数
        openTouch: false,
      };
    },
  },
  destroyed() {
    clearInterval(this.totalAxios);
  },
};
</script>

<style lang="less" scoped>
.userAmount {
  margin-top: 40px;
  .title {
    margin-bottom: 17px;
    img {
      width: 363px;
      height: 39px;
    }
  }
  .scrollBox {
    height: 161px;
  }
  .scrollBoxDouble {
    height: 322px;
  }
  .seamless-warp {
    height: 161px;
    overflow: hidden;
  }
  .seamless-warpDouble {
    height: 322px;
    overflow: hidden;
  }
  ul {
    li {
      display: flex;
      height: 13px;
      align-items: center;
      margin-bottom: 24px;
      .order {
        color: #21e3ff;
        margin-left: 11px;
      }
      .progress {
        position: relative;
        div {
          height: 8px;
          //   position: absolute;
          bottom: 0;
          height: 100%;
          width: 0%;
          // 兼容性
          background-image: -webkit-linear-gradient(
            -45deg,
            #20dcf9 25%,
            #20dcf9 25%,
            #20dcf9 50%,
            #20dcf9 50%,
            #20dcf9 75%,
            #20dcf9 75%,
            #20dcf9
          );
          background-image: -moz-linear-gradient(
            -45deg,
            #20dcf9 25%,
            #20dcf9 25%,
            #20dcf9 50%,
            #20dcf9 50%,
            #20dcf9 75%,
            #20dcf9 75%,
            #20dcf9
          );
          background-image: -o-linear-gradient(
            -45deg,
            #20dcf9 25%,
            #20dcf9 25%,
            #20dcf9 50%,
            #20dcf9 50%,
            #20dcf9 75%,
            #20dcf9 75%,
            #20dcf9
          );
          background-image: -ms-linear-gradient(
            -45deg,
            #20dcf9 25%,
            #20dcf9 25%,
            #20dcf9 50%,
            #20dcf9 50%,
            #20dcf9 75%,
            #20dcf9 75%,
            #20dcf9
          );
          background-image: linear-gradient(
            -45deg,
            #20dcf9 25%,
            #20dcf9 25%,
            #20dcf9 50%,
            #20dcf9 25%,
            #20dcf9 50%,
            #20dcf9 75%,
            #20dcf9 75%,
            #20dcf9
          );
          background-size: 0.8rem 0.8rem;
          background-color: #eaeaea;
          animation: move 10s infinite linear;
        }
      }
      .userName {
        width: 65px;
        color: #dedee0;
        overflow: hidden;
        text-align: center;
        margin: 0 8px 0 11px;
      }
      .price {
        margin-left: 8px;
        color: #c9d9db;
      }
    }
  }
}
</style>